<template>
	<view class="goods-detail-page">
		<!-- 滚动内容 -->
		<scroll-view class="scroll-content" scroll-y :style="{ height: contentHeight }">
			<!-- 顶部轮播图 -->
			<swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500"
				indicator-color="rgba(56, 56, 56, 0.8)" indicator-active-color="#c6c6c6">
				<swiper-item v-for="(img, index) in bannerImages" :key="index">
					<image class="banner-img" :src="img"></image>
				</swiper-item>
			</swiper>

			<!-- 款式选择 -->
			<view class="option-section">
				<text class="section-title">款式 ({{styles.length}})</text>
				<view class="option-container">
					<view class="option-value">
						<view style="display: flex;" v-for="(style, index) in styles" :key="index">
							<view>
								<image :src="style.url" class="style-img"></image>
							</view>
							<view class="option-btn" :class="{ active: currentStyle === index }"
								@click="currentStyle = index">
								{{ style.name }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 数量选择 -->
			<view class="option-section">
				<text class="section-title">数量</text>
				<view class="option-container">
					<view class="quantity-box">
						<up-number-box v-model="quantity" @change="valChange" button-size="25" buttonWidth='25'
							inputBgColor="#fff" bgColor="#ebebeb" iconStyle="color: #272727;width:16px;height:16px"
							integer color="#1e1e1e" max="100" longPress buttonRadius="5px"></up-number-box>
						<text class="stock-text">库存充足</text>
					</view>
				</view>
			</view>
			
			<!-- 商品信息卡片 -->
			<view class="product-info-card">
				<text class="section-title">价格</text>
				<view class="price-container">
					<text class="price">¥ {{ price.toFixed(2) }}</text>
					<text class="original-price">¥ {{ (price * 1.2).toFixed(2) }}</text>
					<text class="discount">8折</text>
				</view>
				<text class="product-name">动物系列盲盒玩具</text>
				<view class="rating-container">
					<text class="rating">4.9</text>
					<text class="sales">(2.3万+人已购)</text>
				</view>
			</view>

			<!-- 收货地址 -->
			<view class="option-section">
				<text class="section-title">收货地址</text>
				<view class="option-container">
					<view class="address-box">
						<text class="address-text">{{ address }}</text>
						<text class="iconfont icon-arrow-right"></text>
					</view>
				</view>
			</view>

			<!-- 商品详情 -->
			<view class="detail-section">
				<text class="section-title">商品详情</text>
				<image class="detail-img" :src="detailImg"></image>
			</view>

			<!-- 商品参数 -->
			<view class="spec-section">
				<text class="section-title">商品参数</text>
				<view class="spec-item" v-for="(item, index) in productSpecs" :key="index">
					<text class="spec-key">{{ item.key }}</text>
					<text class="spec-value">{{ item.value }}</text>
				</view>
			</view>

			<!-- 用户评价 -->
			<view class="review-section">
				<text class="section-title">用户评价 (128)</text>
				<view class="review-item" v-for="(review, index) in reviews" :key="index">
					<view class="user-info">
						<image class="user-avatar" :src="review.avatar"></image>
						<text class="user-name">{{ review.name }}</text>
						<view class="user-rating">
							<text class="iconfont icon-star" v-for="i in review.rating" :key="i"></text>
						</view>
					</view>
					<text class="review-content">{{ review.content }}</text>
					<text class="review-time">{{ review.time }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部固定按钮 -->
		<view class="bottom-bar">
			<view class="service-btn">
				<text class="iconfont icon-customer-service"></text>
				<text class="btn-text">客服</text>
			</view>
			<view class="service-btn">
				<text class="iconfont icon-shopping-cart"></text>
				<text class="btn-text">购物车</text>
			</view>
			<button class="cart-btn" @click="addToCart">加入购物车</button>
			<button class="order-btn" @click="goToOrder">立即下单</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed, onMounted } from 'vue';

	// 定义数据类型
	interface StyleOption {
		id : number;
		name : string;
		url : string;
	}

	interface ProductSpec {
		key : string;
		value : string;
	}

	interface Review {
		id : number;
		avatar : string;
		name : string;
		rating : number;
		content : string;
		time : string;
	}

	// 初始化数据
	const bannerImages = ref<string[]>([
		'/static/img/fox.jpg',
		'/static/img/dog.jpg',
		'/static/img/ele.gif',
	]);

	const styles : StyleOption[] = [
		{ id: 1, name: '随机1个盲盒', url: '/static/img/hide.jpg' },
		{ id: 2, name: '整盒8个', url: '/static/img/hide.jpg' },
	];

	const productSpecs : ProductSpec[] = [
		{ key: '品牌', value: '萌趣' },
		{ key: '材质', value: 'PVC' },
		{ key: '尺寸', value: '约8cm' },
		{ key: '重量', value: '约150g' },
		{ key: '适用年龄', value: '14岁+' },
	];

	const reviews : Review[] = [
		{
			id: 1,
			avatar: 'https://via.placeholder.com/40x40?text=U1',
			name: '小明',
			rating: 5,
			content: '做工精细，款式超可爱，很惊喜！',
			time: '2023-06-15',
		},
		{
			id: 2,
			avatar: 'https://via.placeholder.com/40x40?text=U2',
			name: '小红',
			rating: 4,
			content: '抽到了隐藏款，太开心了！物流也很快。',
			time: '2023-06-10',
		},
	];

	// 状态管理
	const currentStyle = ref(0);
	const quantity = ref(1);
	const price = ref(68.99);
	const address = ref('繁花雅苑10栋1单元123室');
	const detailImg = ref('https://via.placeholder.com/375x500?text=Detail');

	// 计算属性
	const contentHeight = computed(() => {
		return `calc(100vh - 50px)`; // 减去底部按钮的高度
	});

	// 方法
	const decrement = () => {
		if (quantity.value > 1) {
			quantity.value--;
		}
	};

	const increment = () => {
		quantity.value++;
	};

	const addToCart = () => {
		uni.showToast({
			title: '加入购物车成功',
			icon: 'success',
		});
	};

	const goToOrder = () => {
		uni.navigateTo({
			url: '/pages/order/order',
		});
	};

	const goBack = () => {
		uni.navigateBack();
	};

	// 生命周期钩子
	onMounted(() => {
		// 可在此处请求接口获取真实数据
	});
</script>

<style scoped>
	/* 引入字体图标 */
	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_2400158_7l8n20j1n2n.ttf') format('truetype');
	}

	.iconfont {
		font-family: 'iconfont' !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-back:before {
		content: '\e600';
	}

	.icon-share:before {
		content: '\e601';
	}

	.icon-star:before {
		content: '\e602';
	}

	.icon-customer-service:before {
		content: '\e603';
	}

	.icon-shopping-cart:before {
		content: '\e604';
	}

	.icon-arrow-right:before {
		content: '\e605';
	}

	/* 基础样式 */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/* 页面容器 */
	.goods-detail-page {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部轮播图 */
	.banner-swiper {
		width: 100%;
		height: 400px;
		background-color: #f8f8f8;
	}

	.banner-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* 商品信息卡片 */
	.product-info-card {
		padding: 15px;
		background-color: #fff;
		/* margin-bottom: 10px; */
	}

	.price-container {
		display: flex;
		align-items: baseline;
		margin-bottom: 8px;
	}

	.price {
		font-size: 20px;
		color: #f40;
		font-weight: bold;
		margin-right: 10px;
	}

	.original-price {
		font-size: 14px;
		color: #999;
		text-decoration: line-through;
		margin-right: 10px;
	}

	.discount {
		font-size: 12px;
		color: #fff;
		background-color: #f40;
		padding: 2px 4px;
		border-radius: 2px;
	}

	.product-name {
		font-size: 16px;
		color: #333;
		margin-bottom: 8px;
		line-height: 1.4;
	}

	.rating-container {
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #666;
	}

	.rating {
		color: #f40;
		margin-right: 10px;
	}

	/* 中间滚动内容 */
	.scroll-content {
		flex: 1;
		background-color: #f5f5f5;
	}

	/* 选项区域（款式、数量、地址） */
	.option-section {
		background-color: #fff;
		padding: 5px 15px 0;
		/* margin-bottom: 10px; */
	}

	.section-title {
		font-size: 14px;
		color: #666;
		margin-bottom: 10px;
	}

	.option-container {
		padding: 5px 0;
	}

	.option-value {
		margin-top: 16rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 32rpx;
	}

	.style-img {
		width: 70rpx;
		height: 70rpx;
	}

	.option-btn {
		height: 70rpx;
		line-height: 70rpx;
		padding: 0px 16rpx;
		border-radius: 0px 8rpx 8rpx 0;
		background-color: #f3f3f3;
		color: #333;
		font-size: 12px;
		white-space: nowrap;
	}

	.option-btn.active {
		border-color: #f40;
		color: #f40;
		background-color: #fff2e8;
	}

	.quantity-box {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}

	.stock-text {
		margin-left: 10px;
		font-size: 12px;
		color: #666;
	}

	.address-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		color: #333;
	}

	/* 商品详情区域 */
	.detail-section {
		background-color: #fff;
		padding: 10px 15px;
		margin-bottom: 10px;
	}

	.detail-img {
		width: 100%;
		height: auto;
		margin-top: 5px;
	}

	/* 商品参数区域 */
	.spec-section {
		background-color: #fff;
		padding: 10px 15px;
		margin-bottom: 10px;
	}

	.spec-item {
		display: flex;
		padding: 8px 0;
		border-bottom: 1px solid #eee;
	}

	.spec-item:last-child {
		border-bottom: none;
	}

	.spec-key {
		width: 30%;
		font-size: 12px;
		color: #666;
	}

	.spec-value {
		width: 70%;
		font-size: 12px;
		color: #333;
	}

	/* 用户评价区域 */
	.review-section {
		background-color: #fff;
		padding: 10px 15px;
		margin-bottom: 10px;
	}

	.review-item {
		padding: 10px 0;
		border-bottom: 1px solid #eee;
	}

	.review-item:last-child {
		border-bottom: none;
	}

	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.user-avatar {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		margin-right: 10px;
	}

	.user-name {
		font-size: 12px;
		color: #666;
		margin-right: 10px;
	}

	.user-rating {
		display: flex;
		color: #ffb800;
	}

	.review-content {
		font-size: 14px;
		color: #333;
		margin-bottom: 8px;
		line-height: 1.4;
	}

	.review-time {
		font-size: 10px;
		color: #999;
	}

	/* 底部固定按钮 */
	.bottom-bar {
		display: flex;
		height: 50px;
		background-color: #fff;
		border-top: 1px solid #eee;
	}

	.service-btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #666;
		font-size: 12px;
	}

	.cart-btn,
	.order-btn {
		flex: 2;
		height: 100%;
		line-height: 50px;
		text-align: center;
		font-size: 16px;
		color: #fff;
	}

	.cart-btn {
		background-color: #ffb03f;
	}

	.order-btn {
		background-color: #f40;
	}
</style>